<template>
    <div>
        <el-button @click="add()">新增</el-button>
        <!-- 设置v-if语句，通过动态改变Visiable值用来控制弹窗是否弹出-->
        <!-- 设置ref属性，相当于唯一标识dialog-component组件-->
        <!-- @edit="edit"监听 -->
        <list ref="list" @edit="edit"></list>
        <info ref="info" :isfoShow="isfoShow" :type="openType" @update="update"></info>
    </div>
</template>

<script>
import list from './list.vue'
//	1.引入弹窗组件info
import info from "./info";
export default {
    data() {
        return {
            isfoShow: false,
            infolist: {},
            openType: 'add'

        }
    },
    components: {
        list,
        info
        // info
    },
    methods: {
        add() {
            // 打开弹窗
            this.isfoShow = !this.isfoShow;
            this.openType = 'add'
            //点击新增清空值
            this.$refs.info.setVal({
                // goodsname: '',
                // first_cateid: '',
                // second_cateid: '',
                // status: 1
                goodsname: '',
                first_cateid: '',
                second_cateid: '',
                price: '',
                market_price: '',
                img: '',
                description: '',
                specsid: '',
                specsattr: '',
                ishot: 1,
                isnew: 1,
                status: 1
            },)

        },
        edit(info) {
            // 打开弹窗
            this.isfoShow = !this.isfoShow;
            this.openType = 'edit'
            this.$refs.info.setVal(info)
            // console.log(info);
        },
        update() {
            //这个函数会在修改或新增成功后触发list重新加载
            this.$refs.list.getTableData()
        }
    }
}
</script>

<style>

</style>